<script
		lang="ts"
		setup
>
    import { tenantIdGet } from '@/api'
    import RenderGender from '@/components/RenderGender.vue'
    import type { OTenantIdGet } from '@/typed/response'
    import { OTenantIdGetValue } from '@/typed/response.value'
    import { renderMaybeNull } from '@/utils';
    import { NAvatar } from 'naive-ui'
    import { computed, ref, watch } from 'vue'
    import { formatTime } from '@/utils'

    interface IProps {
        show?: boolean;
        width?: number | string;
        installment?:number;
        installmentPriceList?:any
    }

    const emit = defineEmits(['update:show'])
    const props = withDefaults(defineProps<IProps>(), {
        show: false,
        width: 500
    })


    const loading = ref(false)
    const tenantDetail = {}

    watch(() => props.show, (val) => {
        getInfo(props.id)
    })

    function onUpdateShow(show: boolean) {
        emit('update:show', show)

    }

    function splitInstallments(total, periods) {
        // 转成最小单位（分）
        const totalCents = Math.round(total * 100)
        const base = Math.floor(totalCents / periods)
        const remainder = totalCents - base * periods

        const result = Array(periods).fill(base)
        for (let i = 0; i < remainder; i++) {
            result[i] += 1
        }

        // 再转换回元
        return result.map((cents) => cents / 100)
    }

    function generateMonthlySchedule(data, deductionDateType, deductionDateValue) {
        const result = [];
        const today = new Date();

        for (let i = 0; i < data.length; i++) {
            let date = new Date(today);

            if (deductionDateType === '10') {
                // 下单顺延
                date.setMonth(date.getMonth() + i); // 每期加 i 个月
                date.setDate(date.getDate() + deductionDateValue); // 顺延天数
            } else if (deductionDateType === '20') {
                // 每月固定日，从下个月开始
                date.setMonth(date.getMonth() + 1 + i); // 从下个月开始，每期加 i 个月
                date.setDate(deductionDateValue); // 固定日
                // 处理月份天数不足的情况
                while (date.getMonth() !== (today.getMonth() + 1 + i) % 12) {
                    date.setDate(date.getDate() - 1);
                }
            } else {
                throw new Error('未知 deductionDateType');
            }

            result.push({
                price: data[i].toFixed(2),
                date: date.toISOString().split('T')[0],
            });
        }

        return result;
    }

    let installmentDMap = {};
    let installmentArr = []
    async function getInfo(id: number) {
        installmentArr = [props.installment];
        installmentDMap[props.installment] = props.installmentPriceList
    }

</script>

<template>
	<n-drawer
			:show="show"
			:width="width"
			close-on-esc
			@update:show="onUpdateShow"
	>
		<n-drawer-content closable>

			<n-spin :show="loading">
				<section>
					<div>
						<n-tabs type="line" trigger="hover">
							<n-tab-pane
									v-for="item in installmentArr"
									:key="item"
									:name="item"
									:tab="`${item}期`"
							>
								<n-table :bordered="false" :single-line="false">
									<thead>
									<tr>
										<th>期数</th>
										<th>应扣金额</th>
										<th>还款日期</th>
									</tr>
									</thead>
									<tbody>
									<tr v-for="(item, index) in installmentDMap[item]" :key="index">
										<td>{{ index + 1 }}</td>
										<td>{{ item.price }}</td>
										<td>{{ item.date || '--'}}</td>
									</tr>
									</tbody>
								</n-table>
							</n-tab-pane>

						</n-tabs>
					</div>

				</section>


			</n-spin>
		</n-drawer-content>
	</n-drawer>
</template>

<style
		lang="less"
		scoped
>
	.drawerHeader {
		display: flex;
		align-items: stretch;

		:deep(.n-avatar) {
			flex-shrink: 0;
		}

		.flex {
			flex-grow: 1;
			margin-left: 20px;
			display: flex;
			align-items: center;
			width: 0;

			.info {
				width: 100%;
			}

			.name {
				font-size: 16px;
				font-weight: bold;
			}

			.desc {
				margin-top: 10px;
				font-size: 14px;
				color: var(--n-text-color-2);
			}
		}
	}

	.infoTitle {
		margin-bottom: 20px;
		font-size: 16px;
		font-weight: bold;
	}

	.infoItem {
		display: flex;
		line-height: 1.5;
		margin-bottom: 16px;
		font-size: 14px;

		.label {
			width: 120px;
			flex-shrink: 0;
			color: var(--n-text-color-2);
		}

		.value {
			flex: 1;
			color: var(--n-text-color-1);
		}
	}

	section {
		margin-bottom: 24px;

		&:last-child {
			margin-bottom: 0;
		}
	}
</style>
